﻿<template>
  <div>
    <h2 class="header">内联增加计数</h2>
    <button @click="count++">增加1</button>
    <p>计数是：{{ count }}</p>

    <h2 class="header">使用方法增加计数</h2>
    <button @click="incrementCount">增加1</button>
    <p>计数是：{{ count }}</p>

    <h2 class="header">弹出问候</h2>
    <button @click="greet">问候</button>
    <h2 class="header">弹出“你好”消息</h2>
    <button @click="say('你好')">说你好</button>
    <h2 class="header">弹出“再见”消息</h2>
    <button @click="say('再见')">说再见</button>

    <h2 class="header">使用 $event 变量提交表单</h2>
    <button @click="warn('表单还不能提交。', $event)">提交</button>
    <h2 class="header">使用箭头函数处理提交</h2>
    <button @click="(event) => warn('表单还不能提交。', event)">提交</button>

    <h2 class="header">阻止默认提交行为</h2>
    <form @submit.prevent="onSubmit">
      <button type="submit">提交</button>
    </form>

    <h2 class="header">监听 Enter 键</h2>
    <input @keyup.enter="onEnterPress" placeholder="按 Enter" />

    <h2 class="header">Ctrl + 点击我</h2>
    <div @click.ctrl="doSomethingOnCtrlClick">Ctrl+点击我</div>

    <h2 class="header">Ctrl + 点击 (精确)</h2>
    <button @click.ctrl.exact="onCtrlClick">Ctrl+点击 (精确)</button>

    <h2 class="header">右键点击我</h2>
    <div @click.right="onRightClick">右键点击我</div>

    <h2 class="header">阻止事件冒泡</h2>
    <a @click.stop="doThis">停止传播</a>

    <h2 class="header">防止默认事件</h2>
    <form @submit.prevent="onSubmit">
      <button type="submit">提交</button>
    </form>

    <h2 class="header">链式使用修饰符</h2>
    <a @click.stop.prevent="doThat">停止并防止</a>

    <h2 class="header">仅处理元素本身的事件</h2>
    <div @click.self="doThat">点击我（本身）</div>

    <h2 class="header">捕获模式</h2>
    <div @click.capture="doThis">捕获点击</div>

    <h2 class="header">事件仅触发一次</h2>
    <a @click.once="doThis">点击一次</a>

    <h2 class="header">使用 passive 提高滚动性能</h2>
    <div @scroll.passive="onScroll">滚动我（passive）</div>

    <h2 class="header">按 Enter 键提交</h2>
    <input @keyup.enter="submit" placeholder="按 Enter 提交" />

    <h2 class="header">按 Page Down 处理事件</h2>
    <input @keyup.page-down="onPageDown" placeholder="按 Page Down" />

    <h2 class="header">Ctrl + 点击这里</h2>
    <div @click.ctrl="doSomething">Ctrl + 点击这里</div>

    <h2 class="header">Alt + Enter</h2>
    <input @keyup.alt.enter="clear" placeholder="Alt + Enter 清除" />

    <h2 class="header">仅 Ctrl (无其他按键)</h2>
    <button @click.ctrl.exact="onCtrlClick">Ctrl+点击 (精确)</button>

    <h2 class="header">右键点击这里</h2>
    <div @click.right="onRightClick">右键点击这里</div>
  </div>
</template>

<style>
.header {
  color: red;
}
</style>

<script>
export default {
  data() {
    return {
      count: 0,
      name: 'Vue.js'
    }
  },
  methods: {
    incrementCount() {
      this.count++;
    },
    say(message) {
      alert(message);
    },
    greet(event) {
      alert(`你好，${this.name}！`);
      console.log(event)
      if (event) {
        alert('触发对象是：' + event.target.tagName);
      }
    },
    warn(message, event) {
      if (event) {
        event.preventDefault();
      }
      alert(message);
    },
    onSubmit() {
      alert('表单已提交！');
    },
    onEnterPress() {
      alert('按下了Enter键！');
    },
    doSomethingOnCtrlClick() {
      alert('检测到Ctrl+点击！');
    },
    onCtrlClick() {
      alert('精确检测到Ctrl+点击！');
    },
    onRightClick() {
      alert('检测到右键点击！');
    },
    doThis() {
      alert('执行了操作。');
    },
    doThat() {
      alert('执行了另一个操作。');
    },
    onScroll() {
      console.log('正在滚动...');
    },
    submit() {
      alert('提交成功！');
    },
    onPageDown() {
      alert('按下了Page Down键！');
    },
    doSomething() {
      alert('Ctrl + 点击检测到！');
    },
    clear() {
      alert('检测到Alt + Enter，正在清除...');
    }
  }
}
</script>
